<template>
  <div>
     <van-nav-bar :title="users"
     :fixed=true
     left-arrow
      @click-left="onClickLeft"
     >
     </van-nav-bar>
     <div class="bang">
         <h2>未上榜</h2>
         <p>本月当前排名</p>
         <div class="ranklist">
           <p><span>0</span><span>活动上榜<van-icon name="arrow" /></span></p>
           <p><span>0</span><span>邀请人数<van-icon name="arrow" /></span></p>
           <p><span>0</span><span>综合分数<van-icon name="arrow" /></span></p>
         </div>
       </div>
       <div class="pai">
         <p>上月达人榜</p>
         <ul>
           <li><span>1</span><span>25.2分</span></li>
           <li><span>2</span><span>22.2分</span></li>
           <li><span>3</span><span>21.2分</span></li>
           <li><span>4</span><span>20.2分</span></li>
           <li><span>5</span><span>18.2分</span></li>
           <li><span>6</span><span>17.2分</span></li>
           <li><span>7</span><span>15.2分</span></li>
           <li><span>8</span><span>15.1分</span></li>
           <li><span>9</span><span>15.0分</span></li>
           <li><span>10</span><span>13.2分</span></li>
           <li><span>11</span><span>12.2分</span></li>
           <li><span>12</span><span>10.2分</span></li>
           <li><span>我的上月名次</span><span>99+</span></li>
         </ul>
       </div>
  </div>
</template>

<script>
  export default{
    name:'Ranking',
    data(){
      return{
        users:''
      }
    },
    methods:{
      onClickLeft(){
        this.$router.go(-1)
      },
      handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if(scrollTop>90){
          this.users="本月排名"
        }else{
          this.users=""
        }
      }
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    },
  }
</script>

<style scoped="">
  .bang{
    margin-top: -14px;
    padding: 10px 0 0 0;
    text-align: center;
    box-sizing: border-box;
    height: 200px;
    background: #E8E8E8;
  }
  .van-icon-arrow-left{
    color: #bfbfbf;
    font-size: 24px;
  }
  .van-nav-bar__title{
    font-size: 18px;
    font-weight: 600;
  }
  .ranklist{
    height: 60px;
    display: flex;
    margin-top: 50px;
  }
  .ranklist p{
    width: 100px;
    display: flex;
    flex-direction: column;
    padding: 0 12px;
  }
  .ranklist p:nth-child(2){
    border-right: 1px solid #8b865a;
    border-left: 1px solid #8b865a;
  }
  .ranklist p span:nth-child(1){
    font-size: 18px;
    color: #fab811;
    line-height: 24px;
  }
  .ranklist p span:nth-child(2){
    font-size: 14px;
    color: #b5b299;
  }
  .pai{
    padding: 0 20px;
    font-size: 20px;
  }
  .pai p{
    text-align: left;
  }
  .pai ul{
    display: flex;
    flex-direction: column;
  }
  .pai ul li{
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    background: #FBFBFB;
    margin-bottom: 10px;
  }
</style>
